<template>
  <div class="f3hot">
    <div><span>今日热搜</span><span @click="getData">换一换</span></div>
    <ul v-for="(i, index) in article" :key="index">
      <li @click="gotoArticle(i.nid)">{{ index + 1 }}.{{ i.nname }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: [],
    };
  },
  methods: {
    getData() {
      let url = "http://120.78.224.75:6677/hot";
      this.axios.get(url).then((res) => {
        this.article = res.data.results;
      });
    },
    // 跳转点击页
    gotoArticle(nid) {
      this.$router.push(`/article?nid=${nid}`);
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
.f3hot {
  background-color: rgb(250, 250, 250);
  text-align: left;
  border: 1px solid rgb(205, 205, 205);
  border-radius: 10px;
  overflow: hidden;
  > ul {
    width: 300px;
    margin-left: 15px;
    > li {
      padding-right: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 30px;
      cursor: pointer;
    }
  }
  > div {
    display: flex;
    justify-content: space-between;
    color: rgb(144, 8, 14);
    font-weight: bold;
    margin: 20px;
    > span:first-child {
      background: url("../assets/img/f3/hot.png") no-repeat 0%;
      background-size: contain;
      font-size: 24px;
      display: inline-block;
      padding-left: 30px;
    }
    > span:last-child {
      background: url("../assets/img/f3/change.png") no-repeat;
      background-size: contain;
      font-size: 15px;
      padding-top: 5px;
      padding-left: 30px;
      cursor: pointer;
    }
  }
}
</style>